<template>
	<view class="register">
		<view class="status-bar"> </view>
		<view class="top-btn" @tap="goBack"> </view>
		<view class="content">
			<view class="register-account">
				<view class="title"> {{ title }} </view>
				<view class="tips"> {{ tips }} </view>
				<InputPhone :pageType="pageType" @inputEnd="inputEnd" v-if="currentPage == 0" />
				<CheckYzmCode :pageType="pageType" :phone="mobile" @checkYzmEnd="checkYzmEnd" v-if="currentPage == 1" />
				<ConfirmPwd :pageType="pageType" :phone="mobile" :code="code" v-if="currentPage == 2"/>
			</view>
		</view>
	</view>
</template>
<!-- 忘记密码和注册公用一个页面 -->
<script setup>
	import { computed, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import InputPhone from './components/InputPhone.vue';
	import CheckYzmCode from './components/CheckYzmCode.vue';
	import ConfirmPwd from './components/ConfirmPwd.vue';
	const registerTitleArr = ref(['注册账号', '请输入验证码', '请设置密码'])
	const registerTipsArr = ref(['', '验证码已发送至：', '设置登陆密码用于登录信购'])
	const forgetTitleArr = ref(['忘记密码', '请输入验证码', '请设置新的密码'])
	const forgetTipsArr = ref(['请输入手机号', '验证码已发送至：', '重置之前的密码，设置新密码'])
	const title = computed(() => {
		if(pageType.value == 1) return registerTitleArr.value[currentPage.value]
		return forgetTitleArr.value[currentPage.value]
	})
	const tips = computed(() => {
		if(pageType.value == 1) {
			if(currentPage.value == 1) return registerTipsArr.value[currentPage.value] + mobile.value
			return registerTipsArr.value[currentPage.value]
		} else {
			if(currentPage.value == 1) return registerTipsArr.value[currentPage.value] + mobile.value
			return forgetTipsArr.value[currentPage.value]
		}
	})
	const mobile = ref('')  // 输入的手机号
	const code = ref('') // 输入的验证码
	// 1  注册   2 忘记密码
	const pageType = ref(1)
	// 0 输入手机号 1 校验验证码 2 设置密码
	const currentPage = ref(0) 
	const inputEnd = (e) => {
		currentPage.value = e.pageNum
		mobile.value = e.phone
	}
	const checkYzmEnd = (e) => {
		currentPage.value = e.pageNum
		code.value = e.code
	}
	const goBack = () =>{
		if(currentPage.value == 0) {
			uni.navigateBack()
		} else {
			currentPage.value --
		}
	}
	onLoad((e) => {
		const { type } = e
		pageType.value = type
	})
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100vh;
		padding: 10px 0 0;
		box-sizing: border-box;
		background: url('/static/icon/login/bg.png') no-repeat center center;
		background-size: 100% 100%;
		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.top-btn {
			width: 42px;
			height: 42px;
			margin-left: 20px;
			background: url('/static/icon/login/back.png') no-repeat center center;
			background-size: 100% 100%;
		}
		.content {
			padding: 56px 37px;
		}
		.register-account {
			.title {
				color: #333333;
				font-size: 24px;
				font-weight: 500;
				line-height: 28px;
			}
			.tips {
				color: #999999;
				font-size: 16px;
				font-weight: 400;
				margin-top: 12px;
				line-height: 14px;
			}
		}
	}
</style>
